<#import "spring.ftl" as spring />
<#import "template/guest_layout.ftl" as layout>
<@layout.guest_layout "${PageTitle}" >

<link rel="stylesheet" href="resources/styles/buttons.css" />
<link rel="stylesheet" href="resources/styles/checkboxes.css" />
<link rel="stylesheet" href="resources/styles/form_style.css" />
<script>
	$(document).ready(function(){
		$("#check_availability").bind("click", function(){
			searchSponsor($("#sponsor").val());
		})
	})
	
	function searchSponsor(sponsor){
		var params = "keyword=" + sponsor;
		$.ajax({
			type: "POST",
			url: "searchSponsor.spg",
			data: params, 
			dataType: "json",
			success: function(response){
				var result = "Your Sponsor is: "+response.name;
				$("#sponsor_detail").html(result)
			}
		})
	}
</script>


  	<form>
		<div class="column left">
			<section>
			  <label for="sponsor">
			    Sponsor ID
			  </label>    
			  <div>
				<input id="sponsor" name="keyword" type="text" placeholder="Only letters" class="required" />
				<a id="check_availability" class="button icon loop">Check availability</a>
			  </div>
			</section>
		</div>
	</form>
  
  	<div id="sponsor_detail"> 
	</div>

	<#if sponsorNotFound==true>
	  	Sponsor Not Found!
  	</#if>

  <div class="clear"></div>
</form>
</@layout.guest_layout>